<template>
  <div class="departments-container">
    <div class="app-container">
      <!-- <h2>组织架构</h2> -->
      <!-- <el-card>
              <el-row>
                  <el-col :span="8" style="background:pink">111</el-col>
                  <el-col :span="8" style="background:red">222</el-col>
                  <el-col :span="8" style="background:red">333</el-col>
                  <el-col :span="8" style="background:red">444</el-col>
              </el-row>
          </el-card> -->
      <el-card v-loading="loading" class="tree-card">
        <!-- 用了一个行列布局 -->
        <TreeTools :nodeData="company" root @add-depts="addDeptsFn"></TreeTools>
        <el-tree :data="departs" :props="defaultProps" default-expand-all="">
          <template #default="{ data }">
            <TreeTools
              :nodeData="data"
              @del-depts="getDepartments"
              @add-depts="addDeptsFn"
              @editDepts="editDeptsFn"
            ></TreeTools>
          </template>
        </el-tree>
      </el-card>
      <AddDepts
        ref="addDept"
        :deptsList="deptsList"
        :nodeData="nodeData"
        :showDialog.sync="isShow"
        @addDepts="getDepartments"
      ></AddDepts>
      <!-- @close-dialog="closeDialogFn" -->
    </div>
  </div>
</template>

<script>
import TreeTools from "./components/TreeTools.vue";
import AddDepts from "./components/AddDepts.vue";
import { reqGetDepartments } from "@/api/departments";
import { TreeToList } from "@/utils/index";
export default {
  name: "Departments",
  data() {
    return {
      departs: [],
      deptsList: [],
      defaultProps: {
        label: "name",
        children: "children",
      },
      company: { name: "江苏传智播客教育科技股份有限公司", manager: "负责人" },
      isShow: false,
      //  用来存储正在操作的部门
      nodeData: {},
      loading:false
    };
  },
  components: {
    TreeTools,
    AddDepts,
  },
  created() {
    this.getDepartments();
  },
  methods: {
    async getDepartments() {
      this.loading = true
      // 模拟等两秒以后再去做某事儿
      await new Promise((resolve,reject)=>{
        setTimeout(()=>{
          resolve()
        },2000)
      })

      const {
        data: { depts, companyName },
      } = await reqGetDepartments();
      //   原始一级部门数据
      console.log(depts);
      //   处理过后的树形数据
      this.company.name = companyName;
      this.company.id = "";
      this.deptsList = depts;
      this.departs = TreeToList(depts, "");
      this.loading = false
    },
    // closeDialogFn(flag) {
    //   this.isShow = flag;
    // },
    addDeptsFn(nodeData) {
      this.isShow = true;
      this.nodeData = nodeData;
      //   第一种方法：
      //   this.$refs.addDept.getSimpleUserList();
      this.$nextTick(() => {
        this.$refs.addDept.dialogTitle = "添加子部门";
      });
    },
    editDeptsFn(nodeData) {
      this.isShow = true;
      this.nodeData = nodeData;
      this.$nextTick(() => {
        this.$refs.addDept.dialogTitle = "编辑部门";
        this.$refs.addDept.getDepartDetail();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.el-tree {
  ::v-deep {
    // 小三角的样式, 去掉默认的小三角的旋转效果
    .el-tree-node__expand-icon.expanded {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    // 有子节点 且未展开 +
    .el-icon-caret-right:before {
      background: url("~@/assets/common/add-circle.png") no-repeat 0 0;
      content: "";
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
    // 有子节点 且已展开 -
    .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
      background: url("~@/assets/common/minus-circle.png") no-repeat 0 0;
      content: "";
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
    // 没有子节点
    .el-tree-node__expand-icon.is-leaf::before {
      background: url("~@/assets/common/user-filling.png") no-repeat 0 0;
      content: "";
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
  }
}
</style>